<template>
	<yd-layout id='storeDetail' class=''>
		<div class="header">

			<div class="header_c">
				<van-swipe :autoplay="3000" indicator-color="white">
					<van-swipe-item v-for='item in bannerList'>
						<!--<a :href="item.web_url?item.web_url:'javascript:;'">-->
						<img class="header_img" :src="item" alt="" />
						<!--</a>-->
					</van-swipe-item>
				</van-swipe>
			</div>

			<div class="header_content">
				<div class="goods_title">{{goodsDetail.title}}</div>
				<div class="money_num">
					<div class="money">￥{{goodsDetail.price}}</div>
					<div class="num">已售：{{goodsDetail.sell_number}}</div>
				</div>
			</div>
		</div>
		<div class="content">
			<div class="title">商品详情</div>
			<div class="c_v_html" v-html="goodsDetail.detail"></div>
		</div>

		<div slot='bottom' class="bottom">
			<ul>
				<li @click="goStoreCar">
					<div class="img_f">
						<img src="../../assets/store_car.png" alt="" />
						<span>{{carNum}}</span>
					</div>
					<div>购物车</div>
				</li>
				<li @click="openPop(1)">加入购物车</li>
				<li @click="openPop(2)">立即购买</li>
			</ul>
		</div>

		<yd-popup v-model="showPop" position="bottom" :close-on-masker='false'>
			<div class='pop'>
				<div class="pop_title">
					<span>{{titleStr==2?'立即购买':'加入购物车'}}</span>
					<img @click="showPop=false" class="pop_img" src="../../assets/close_3.png" alt="" />
				</div>
				<div class="pop_top c_size_34_48">
					<div class="pop_top_left">购买数量：</div>
					<div class="pop_top_right">
						<img @click="jian" src="../../assets/goodsDetail_3.png" alt="" />
						<!--oninput="if(value.length>18)value=value.slice(0,18)"-->
						<input class="pop_input" pattern="\d*" v-model.number.trim="inputNum" maxlength="4" @blur="blurNumInput(inputNum)" @input='changeNumInput(inputNum)' oninput="if(value.length>4)value=value.slice(0,4)" type="number" />
						<img @click="add" src="../../assets/goodsDetail_2.png" alt="" />
					</div>
				</div>
				<div slot='bottom' @click="goNext" class="pop_bottom">确定</div>
			</div>

		</yd-popup>
		<yd-backtop></yd-backtop>
	</yd-layout>
</template>

<script>
	import { Popup } from 'vue-ydui/dist/lib.rem/popup';
	import mixinInputReg from '../../mixin/mixinInputReg.js';
	import { BackTop } from 'vue-ydui/dist/lib.rem/backtop';
	import { Swipe, SwipeItem } from 'vant';
	export default {
		mixins: [mixinInputReg],
		components: {
			[Popup.name]: Popup,
			[BackTop.name]: BackTop,
			[Swipe.name]: Swipe,
			[SwipeItem.name]: SwipeItem,
		},
		data() {
			return {
				cs: '<strong>neirong</strong>',
				showPop: false,
				inputNum: 1,
				dataObj: {},
				headerList: [],
				titleStr: 1, //1:立即购买。2：加入购物车

				goodsDetail: {},
				carNum: 0,
				buyNumNow: 1,
				buyNumCar: 1,

				bannerList: [],
			}
		},
		created() {},
		watch: {
			inputNum: function(val, oldVal) {
				if(this.titleStr == 1) {
					this.buyNumNow = val
				} else {
					this.buyNumCar = val
				}
			}
		},
		computed: {

		},
		mounted() {

			this.getGoodsDetail()
		},
		methods: {
			getGoodsDetail() {
				this.$root.ajax({
					name: 'mall/goods',
					params: {
						id: this.$route.query.id
					},
				}).then((d) => {
					document.title = d.data.goods.title
					this.goodsDetail = Object.assign({}, this.goodsDetail, d.data.goods)
					if(d.data.goods.album){
						this.bannerList = d.data.goods.album.split(',')
					}
					
					console.log(this.bannerList)
					this.carNum = d.data.cart_item_count

					if(this.$root.isWeiXin()) {
						//分享
						let query = '';
						if(this.$root.config.channel) {
							query = `params=channelDY2FGoldUrlStrDY${this.$route.name}FGkeyNumDY1FGparamsKey1DYidFGparamsVal1DY${this.$route.query.id}`
						} else {
							query = `params=oldUrlStrDY${this.$route.name}FGkeyNumDY1FGparamsKey1DYidFGparamsVal1DY${this.$route.query.id}`
						}
						this.$root.wxShare({
							d: {
								title: `${this.goodsDetail.title}`,
								title_img: this.goodsDetail.title_img
							}, //分享对象，题目等
							query: query, //参数
							desc: `${this.goodsDetail.summary}`
						})
					}

				})
			},
			//打开购买数量弹窗
			openPop(item) {
				this.inputNum = 1;
				this.titleStr = item;
				if(this.titleStr == 1) {
					this.inputNum = this.buyNumNow
				} else {
					this.inputNum = this.buyNumCar
				}
				this.showPop = true;
			},
			//去购物车
			goStoreCar() {
				if(this.carNum > 0) {
					this.$router.push({
						name: 'storeCar',
						query: {

						}
					})
				} else {
					this.$dialog.toast({
						mes: '请先加入商品~',
						timeout: 1500,
					});
				}

			},
			//去下个页面
			goNext() {
				if(this.titleStr == 1) {
					//购物车
					this.addCar()
				} else {
					//立即购买
					this.buyNow()
				}

			},
			//加入购物车
			addCar() {
				this.$root.ajax({
					name: 'mall/cart/add',
					params: {
						goods_id: this.$route.query.id,
						number: this.inputNum,
					}
				}).then((d) => {
					this.inputNum = 1;
					this.getGoodsDetail();
					this.showPop = false;
				})
			},
			//立即购买
			buyNow() {
				this.$root.ajax({
					name: 'mall/order/goods',
					params: {
						goods_id: this.$route.query.id,
						number: this.inputNum,
					}
				}).then((d) => {
					this.$router.push({
						name: 'storeOrder',
						query: {
							id: d.data.order.id
						}
					})
				})
			},
			add() {
				this.inputNum = parseFloat(this.inputNum)
				console.log(this.inputNum)
				if(this.inputNum >= 9999) {
					this.$dialog.toast({
						mes: '数量不能大于9999',
						timeout: 1500,
					});
					this.inputNum = 9999
				} else {
					this.inputNum = this.inputNum + 1
				}
			},
			jian() {
				if(this.inputNum > 1) {
					this.inputNum = this.inputNum - 1
				} else {
					this.$dialog.toast({
						mes: '数量至少为1',
						timeout: 1500,
					});
				}

			},
		}
	}
</script>

<style lang="scss">
	@import './storeDetail.scss';
</style>